﻿<phone:PhoneApplicationPage
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:stick="clr-namespace:VirtualJoystick" 
    x:Class="JoystickTest.MainPage"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid>
            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <Image HorizontalAlignment="Left" Height="51" Margin="406,10,0,0" VerticalAlignment="Top" Width="51" Source="/right.png" Tap="Image_Tap"/>
                <TextBlock Text="{Binding Angle, ElementName=joystick, StringFormat=Angle (°): \{0:n\}}" Margin="20,49,27,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
                <TextBlock Text="{Binding Distance, ElementName=joystick, StringFormat=Distance: \{0:n\}}" Margin="20,88,27,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
                <TextBlock Text="On joystick event:" Margin="20,141,27,0" TextWrapping="Wrap" VerticalAlignment="Top" />
                <TextBlock x:Name="evAngleDegree" Text="Event angle (°): 0" Margin="203,182,15,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
                <TextBlock x:Name="evAngleDistance" Text="Event distance: 0" Margin="203,224,15,0" TextWrapping="Wrap" VerticalAlignment="Top"/>
                <stick:VirtualJoystick x:Name="joystick" HorizontalAlignment="Left" Margin="61,398,0,0" VerticalAlignment="Top" StickMove="joystick_StickMove"/>
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="demoGrid" X="0"/>
                </Grid.RenderTransform>
            </Grid>
        </Grid>
        <Grid x:Name="carDemoPage">
            <Grid>
                <Image HorizontalAlignment="Left" Height="51" Margin="20,10,0,0" VerticalAlignment="Top" Width="51" Source="/right.png" RenderTransformOrigin="0.5,0.5" Tap="Image_Tap_1">
                    <Image.RenderTransform>
                        <CompositeTransform ScaleX="-1"/>
                    </Image.RenderTransform>
                </Image>
                <Image x:Name="car" HorizontalAlignment="Left" Margin="230,263,0,0" VerticalAlignment="Top" Source="/car.png" Height="80" Stretch="None" RenderTransformOrigin="0.5,0.5">
                    <Image.RenderTransform>
                        <CompositeTransform x:Name="carTransform" />
                    </Image.RenderTransform>
                </Image>
                <Rectangle x:Name="carBounds" Stroke="White" StrokeThickness="5" Margin="30,84,10,248" />
                <stick:VirtualJoystick x:Name="carStick" HorizontalAlignment="Left" Margin="79,478,0,-50" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" StickMove="carStick_StickMove">
                    <stick:VirtualJoystick.RenderTransform>
                        <CompositeTransform ScaleX="0.6" ScaleY="0.6"/>
                    </stick:VirtualJoystick.RenderTransform>
                </stick:VirtualJoystick>
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="carGrid" X="480"/>
                </Grid.RenderTransform>
                <Grid.Resources>
                    <Storyboard x:Name="showDemo">
                        <DoubleAnimation Storyboard.TargetName="carGrid" Storyboard.TargetProperty="X" To="480" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="demoGrid" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                    <Storyboard x:Name="showCarDemo">
                        <DoubleAnimation Storyboard.TargetName="carGrid" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                        <DoubleAnimation Storyboard.TargetName="demoGrid" Storyboard.TargetProperty="X" To="-480" Duration="0:0:0.2">
                            <DoubleAnimation.EasingFunction>
                                <CubicEase EasingMode="EaseInOut" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </Grid.Resources>
            </Grid>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>